<template>
  <div class="user-preferences">
    <h3>用户偏好设置</h3>
    
    <el-form :model="preferences" label-width="120px">
      <!-- 视图布局设置 -->
      <el-form-item label="默认视图布局">
        <el-select v-model="preferences.defaultLayout">
          <el-option label="单视图" value="single" />
          <el-option label="双视图" value="double" />
          <el-option label="四视图" value="quad" />
        </el-select>
      </el-form-item>

      <!-- 颜色方案设置 -->
      <el-form-item label="颜色方案">
        <el-select v-model="preferences.colorScheme">
          <el-option label="浅色主题" value="light" />
          <el-option label="深色主题" value="dark" />
          <el-option label="高对比度" value="high-contrast" />
        </el-select>
      </el-form-item>

      <!-- 工具面板设置 -->
      <el-form-item label="工具面板位置">
        <el-radio-group v-model="preferences.toolbarPosition">
          <el-radio label="left">左侧</el-radio>
          <el-radio label="right">右侧</el-radio>
          <el-radio label="top">顶部</el-radio>
          <el-radio label="bottom">底部</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 常用工具设置 -->
      <el-form-item label="常用工具">
        <el-checkbox-group v-model="preferences.quickTools">
          <el-checkbox label="measure">测量</el-checkbox>
          <el-checkbox label="window">窗宽窗位</el-checkbox>
          <el-checkbox label="zoom">缩放</el-checkbox>
          <el-checkbox label="pan">平移</el-checkbox>
          <el-checkbox label="annotate">标注</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!-- 自动保存设置 -->
      <el-form-item label="自动保存">
        <el-switch v-model="preferences.autoSave" />
        <span class="hint">自动保存视图状态和标注</span>
      </el-form-item>
    </el-form>

    <div class="actions">
      <el-button type="primary" @click="savePreferences">保存设置</el-button>
      <el-button @click="resetPreferences">重置默认</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

interface Preferences {
  defaultLayout: string
  colorScheme: string
  toolbarPosition: string
  quickTools: string[]
  autoSave: boolean
}

const defaultPreferences: Preferences = {
  defaultLayout: 'single',
  colorScheme: 'light',
  toolbarPosition: 'right',
  quickTools: ['measure', 'window', 'zoom'],
  autoSave: true
}

const preferences = ref<Preferences>({ ...defaultPreferences })

const savePreferences = () => {
  localStorage.setItem('medical-viewer-preferences', JSON.stringify(preferences.value))
  ElMessage.success('偏好设置已保存')
  emitPreferencesChange()
}

const resetPreferences = () => {
  preferences.value = { ...defaultPreferences }
  ElMessage.info('已重置为默认设置')
  emitPreferencesChange()
}

const emit = defineEmits(['preferences-change'])

const emitPreferencesChange = () => {
  emit('preferences-change', preferences.value)
}

onMounted(() => {
  const savedPreferences = localStorage.getItem('medical-viewer-preferences')
  if (savedPreferences) {
    preferences.value = { ...defaultPreferences, ...JSON.parse(savedPreferences) }
  }
})
</script>

<style scoped>
.user-preferences {
  padding: 20px;
}

.hint {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}

.actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
</style> 